<!--
 * @Author: 刘苗
 * @Description: 
 * @Date: 2021-08-27 15:47:10
-->
<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }">
    <div slot="header">
      <span>折线图配置</span>
    </div>
    <el-form
      :model="option"
      ref="form"
      label-width="100px"
      :inline="false"
      size="small"
    >
      <el-form-item
        label="DOM_ID:"
        prop="id"
        :rules="[{ required: true, message: '请输入DOM_ID', trigger: 'blur' }]"
      >
        <el-input v-model="option.id"></el-input>
      </el-form-item>
      <el-form-item label="折线样式:">
        <el-radio v-model="option.series[0].smooth" :label="true"
          >平滑折线</el-radio
        >
        <el-radio v-model="option.series[0].smooth" :label="false"
          >普通折线</el-radio
        >
      </el-form-item>
      <el-form-item label="显示圆点:">
        <el-radio v-model="option.series[0].symbol" :label="'circle'"
          >显示</el-radio
        >
        <el-radio v-model="option.series[0].symbol" :label="'none'"
          >不显示</el-radio
        >
      </el-form-item>
      <el-form-item
        label="圆点大小:"
        v-if="option.series[0].symbol == 'circle'"
      >
        <el-input
          v-model="option.series[0].symbolSize"
          placeholder="请输入整数"
        ></el-input>
      </el-form-item>
      <el-form-item label="横坐标文案:">
        <div class="xAxis_titles">
          <div
            class="xAxis_titles_item"
            v-for="(title, index) in this.option.xAxis.data"
            :key="index"
          >
            {{ title }}
            <i class="el-icon-delete" @click="handleDel(index)"></i>
          </div>
          <el-row :gutter="20">
            <el-input
              v-model="xAxisTitle"
              style="width: 120px"
              size="small"
            ></el-input>
            <el-button
              type="primary"
              size="mini"
              @click="
                () => {
                  this.option.xAxis.data.push(this.xAxisTitle),
                    (this.xAxisTitle = '');
                }
              "
              >添加</el-button
            >
          </el-row>
        </div>
      </el-form-item>
      <el-form-item label="容器宽度:">
        <el-input v-model="option.style.width" size="small"></el-input>
      </el-form-item>
      <el-form-item label="容器高度:">
        <el-input
          v-model="option.style.height"
          placeholder=""
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="折线颜色:">
        <el-color-picker
          v-model="option.series[0].itemStyle.normal.lineStyle.color"
        ></el-color-picker>
      </el-form-item>
      <el-form-item label="折线点颜色:">
        <el-color-picker
          v-model="option.series[0].itemStyle.normal.color"
        ></el-color-picker>
      </el-form-item>
      <el-form-item label="是否显示Y轴:">
        <el-radio v-model="option.yAxis.axisLine.show" :label="true"
          >显示</el-radio
        >
        <el-radio v-model="option.yAxis.axisLine.show" :label="false"
          >不显示</el-radio
        >
      </el-form-item>
      <el-form-item label="多线配置:"> 
          <!-- <div class="line_list">
            <el-input v-for="(item,index) in option.legend.data" :key="index" :value="item">{{item}}</el-input>
          </div> -->
          <div>
            
          </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>


<script>
export default {
  data() {
    return {
      xAxisTitle: "",
      option: {
        id: "",
        name: "lineCharts",
        style: {
          width: "100%",
          height: "325px",
        },
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["销量"],
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          boundaryGap: false, //控制日期是否在中间显示
          axisLabel: {
            show: true, //是否显示日期
            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
            textStyle: {
              color: "#000", //日期的颜色
              fontSize: 12, //字体的大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#ccc", // x轴的颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#000", //数字的颜色
            },
            inside: false, //控制数据是否在内侧还是外侧显示
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc", // 折线的颜色
            },
          },
        },
        series: [
          {
            name: "销量",
            data: [100, 200, 300, 50, 250, 350, 80],
            type: "line",
            symbol: "circle", //是否显示实心的折线圆点
            smooth: true, //让折线有弧度
            symbolSize: 7, //折线圆点的大小
            itemStyle: {
              normal: {
                color: "#efc883", //折线点的颜色
                lineStyle: {
                  color: "#efc883", //折线的颜色
                },
                label: { show: true }, //是否在折线点上显示数字
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("handleSave", this.option);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleDel(index) {
      this.option.xAxis.data.splice(index, 1);
    },
  },
};
</script>